<template>
  <div>
    <div class="h1">
      消息提示
    </div>
    <div class="code_wrapper">
      <div @click="btnClick" class="dk-btn dk-red-btn">
        点击错误消息提示
      </div>
      <div @click="bClick" class="dk-btn dk-green-btn">
        点击正确提示
      </div>
      <pre class="language-html"><code class="language-html">
        &ltdiv @click="btnClick" class="dk-btn dk-red-btn"&gt 点击错误消息提示 &lt/div&gt
        &ltdiv @click="bClick" class="dk-btn dk-green-btn"&gt 点击正确提示 &lt/div&gt
      </code><code class="language-js">
        export default {
          methods:{
            btnClick:function(){
              this.dkMessage("操作失败","error",true);
            },
            bClick:function(){
              this.dkMessage("操作成功","success",false);
            }
          }
        }
      </code></pre>
    </div>
    <div class="h2">
      说明
    </div>
    <div class="code_wrapper">
      通过改变使用DkUI插件时的options参数，我们可以改变dkMessage在页面上停留的时间。如：
      <pre class="language-js"><code class="language-js">
        Vue.use(DkUI, {duration:4000});
      </code></pre>
       我们即把dkMessage在页面上的停留时间改为4s。
    </div>
    <div class="h2">
      Message Attribute
    </div>
    <dk-table :theads="theads" :tbodys="tbodys"></dk-table>
  </div>
</template>
<script type="text/javascript">
  import '../../../assert/css/style.css';
  import '../../../assert/css/message.css';
  import '../../css/common.css';
  import '../../../assert/css/table.css';

  export default {
    data(){
      return {
          theads:{
            val1:"参数",
            val2:"说明",
            val3:"类型",
            val4:"可选值",
            val5:"默认"
          },
          tbodys:[
            {"参数":"参数1", "说明":"消息的内容", "类型":"String", "可选值":"---", "默认":"操作成功"},
            {"参数":"参数2", "说明":"消息类型，成功为绿色，失败为红色", "类型":"String", "可选值":"success or error", "默认":"success"},
            {"参数":"参数3", "说明":"是否显示关闭按钮", "类型":"Boolean", "可选值":"true or false", "默认":"true"},
          ]
      }
    },
    methods:{
      btnClick:function(){
        this.dkMessage("操作失败","error",true);
      },
      bClick:function(){
        this.dkMessage("操作成功","success",false);
      }
    }
  }
</script>
